
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>基于AI的高考志愿填报助手 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>基于AI的高考志愿填报助手 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">这个基于AI的高考志愿填报助手项目的核心目标是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">该项目的核心目标是利用AI技术，帮助考生在面对复杂的填报规则、海量的院校信息和专业选择的不确定性时，做出更科学、更个性化的选择，以缓解考生和家长的焦虑与迷茫。</div>
          </div>
          <div class="card-source">来源: 项目背景</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在前端技术栈中，哪些JavaScript库被用来增强页面的交互和动画效果？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">项目中用于增强交互和动画效果的库包括：用于滚动动画的AOS、实现打字机效果的Typed.js、用于页面动画的GSAP以及创建背景效果的Particles.js。</div>
          </div>
          <div class="card-source">来源: 技术架构 - 1. 前端技术栈</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">在个性化推荐方案中，系统为考生提供了哪三种核心填报策略的院校分类？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">系统提供的三种核心填报策略分类为：1. 冲刺：录取线稍高于考生分数的院校；2. 匹配：分数与考生匹配的院校；3. 保底：录取线低于考生分数的院校。</div>
          </div>
          <div class="card-source">来源: 使用指南 - 5. 个性化推荐方案</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">该项目使用哪一个库来生成分数对比图表？该图表主要对比了哪些数据？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">该项目使用Chart.js库来生成柱状图。该图表主要用于比较考生分数、所在地区文理科/选科的平均分（假设值）和本科线（假设值）。</div>
          </div>
          <div class="card-source">来源: 使用指南 - 6. 分数对比图表</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">系统是如何将考生的个人爱好融入到志愿推荐中的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">系统会结合考生的专业偏好和爱好，推荐有相关项目或设施的院校。例如，在“个性化推荐方案”中会添加子模块，专门推荐与考生爱好相关的院校及其设施（如为有体育爱好的学生推荐有标准运动场的院校）。</div>
          </div>
          <div class="card-source">来源: 使用指南 - 5. 个性化推荐方案</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">文档中提到了哪些性能优化方面的技术亮点？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">该项目的技术亮点中提到的性能优化技术包括：使用懒加载技术、代码分割以及资源按需加载。</div>
          </div>
          <div class="card-source">来源: 技术亮点 - 2. 性能优化</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">在生成的网页报告中，“主要焦虑分析”模块会涵盖哪些常见问题？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">“主要焦虑分析”模块涵盖的常见焦虑包括：分数不确定性、专业选择纠结、平行志愿规则的复杂性、调剂风险、地域选择的平衡，以及学业与兴趣的兼顾需求。</div>
          </div>
          <div class="card-source">来源: 使用指南 - 2. 主要焦虑分析</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">为了实现学校历年分数表格的排序、搜索和分页功能，项目计划使用哪个JavaScript库？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">项目计划使用DataTables.js库来增强学校历年分数表格的功能，以实现表格的排序、搜索和分页。</div>
          </div>
          <div class="card-source">来源: 使用指南 - 7. 学校历年分数表格</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">根据文档的“技术亮点”，该项目是如何实现响应式设计的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">该项目通过采用CSS Grid和Flexbox来实现自适应布局，从而支持移动端和PC端的无缝切换，实现响应式设计。</div>
          </div>
          <div class="card-source">来源: 技术亮点 - 1. 响应式设计</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
